<template>
	<view class="content">
		<view class="login-title">欢迎来到AIGC阅读</view>
		<view class="login-view">
			<view class="list-view" style="border-bottom: 1rpx solid #F0F0F0;">
				<view class="phone-number-view">手机号：</view>
				<u-input v-model="phone" placeholder="请输入手机号" />
				<view v-if="tips" class="phone-tips-view">{{tips}}</view>
			</view>
			<view class="list-view">
				<view class="phone-number-view">验证码：</view>
				<u-input v-model="code" placeholder="请输入验证码" />
				<view :class="canGetCode ? 'code-tips-view' : 'code-tips-view-sel'" @tap.stop="getCode">{{codeText}}</view>
			</view>
		</view>
		<view class="login-button" @tap.stop="loginBtn">登录</view>
		<upVipView :show="showUp" @changeShow="changeShow" />
	</view>
</template>

<script>
	import upVipView from '@/components/up-vip/up-vip.vue'
	export default {
		data() {
			return {
				phone: '',
				code: '',
				tips:'',
				codeText:'获取验证码',
				canGetCode: true,
				time: 60,
				showUp: false
			}
		},
		components:{ upVipView },
		methods: {
			loginBtn(){
				if(this.phone.trim() === ''){
					this.tips = '手机号不能为空'
					return
				}else {
					this.tips = ''
				}
				if(this.code.trim() === ''){
					uni.showToast({ 
						title:'请输入验证码',
						icon:'none'
					})
					return
				}
				uni.setStorageSync('phone',this.phone)
				uni.$emit('loginSuccess',this.phone)
				this.showUp = true
			},
			changeShow(){
				this.showUp = false
				uni.navigateBack()
			},
			getCode(){
				let timer
				clearInterval(timer)
				if(!this.canGetCode) return
				this.canGetCode = false
				timer = setInterval(()=>{
					if(this.time <= 1){
						clearInterval(timer)
						this.codeText = '重新获取'
						this.canGetCode = true
					} else {
						this.time --
						this.codeText = `${this.time}s后重新获取`
					}
				},1000)
			},
		}
	}
</script>

<style scoped>

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login-view {
		width: 340px;
		margin-top: 100rpx;
		background-color: #fff;
		padding: 0 20rpx;
	}

	.login-title {
		margin-top: 300rpx;
		font-size: 60rpx;
	}

	.list-view {
		display: flex;
		align-items: center;
		padding: 16rpx 0;
	}

	.phone-number-view {
		margin-right: 12rpx;
	}
	.phone-tips-view {
		background-color: red;
		color: #fff;
		padding: 4rpx 10rpx;
		font-size: 24rpx;
		border-radius: 6rpx;
	}
	.code-tips-view {
		background-color: #FF7200;
		color: #fff;
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		border-radius: 8rpx;
	}
	.code-tips-view-sel {
		background-color: #535353;
		color: #fff;
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		border-radius: 8rpx;
	}
	.login-button {
		margin-top: 40rpx;
		background-color: #FF7200;
		color: #fff;
		font-size: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 8rpx;
		width: 340px;
		height: 50px;
	}
</style>